<!DOCTYPE html>
<html lang="en">
<head>
<title>How do I customize the look and feel of pages in Lessons?</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="" name="description">
<link href="../css/help.css" media="all" rel="stylesheet" type="text/css" charset="utf-8">
<link href="/library/webjars/fontawesome/4.7.0/css/font-awesome.min.css" media="screen" rel="stylesheet">
<link href="/library/skin/morpheus-default/tool.css" media="screen" rel="stylesheet" type="text/css" charset="utf-8">
<script src="/library/webjars/jquery/1.12.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/library/js/headscripts.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    includeWebjarLibrary('featherlight');
    $(document).ready(function(){
      $("a.screensteps-image-zoom").featherlight({
        type: { image:true },
        closeOnClick: 'anywhere'
      }); 
    });   
</script>
</head>
<body>
  <div><div>
<div><h1 class="article-title">How do I customize the look and feel of pages in Lessons?</h1></div>
<div>



    <div class="step-instructions screensteps-textblock screensteps-wrapper--introduction screensteps-wrapper">
  <div id="text-content_BBDD55DD-5141-4DF6-9667-47E8A67CD3D7" class="text-block-content">
    <p>If you have used cascading style sheets (CSS) in web design, you can create and upload a custom style sheet to adjust the layout, design, and formatting of your lesson pages.</p>
<p><em><strong>Note:</strong> Creating a custom style sheet for <strong>Lessons</strong> is recommended for advanced designers only.</em></p>
  </div>
</div>

      <div class="step screensteps-section screensteps-depth-1" id="create-a-style-sheet-for-your-lesson-pages">
    <h2 class="step-title screensteps-heading">Create a style sheet for your lesson pages.</h2>
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_09D332B5-7512-4CA7-B256-C74411833FE5" class="text-block-content">
    <p>On your computer, create a CSS file to use.  You can download and edit the one attached below to get started.</p>
  </div>
</div>
 
      <div class="screensteps-wrapper--attachment">
  <a class="" href="https://media.screensteps.com/attachment_assets/assets/005/062/964/original/test.css" target="_blank">
    
    test.css
  </a>
</div>
 
      <div class="step-instructions screensteps-textblock screensteps-wrapper--tip screensteps-wrapper">
  <div id="text-content_B44679A7-226C-4B58-8E28-CCF86FF07F5B" class="text-block-content">
    <p><strong>Tip:</strong> If you save the file with the name <strong>default.css</strong>, it will become the default for all the lesson pages in your site.</p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="accessing-the-lessons-tool">
    <h2 class="step-title screensteps-heading">Go to Lessons.</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/007/054/008/original/8682a78f-cec9-490a-bad3-d79a4d6d0755.png" alt="" height="110" width="202">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_44D84534-5435-4C9C-9F82-417476B95ACF" class="text-block-content">
    <p>If you titled your page something other than <em>Lessons</em>, select the title of the page as it appears in your Tool Menu.</p>
  </div>
</div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_F5A265A1-B5B8-4FA1-AF14-90A6CD8A8200" class="text-block-content">
    <p>Select the <strong>Title</strong> of the lesson page (e.g., <strong>Lessons</strong>,<strong> Activities</strong>,<strong> Week: 1</strong>)<strong> </strong>from the Tool Menu in your site.  </p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="edit-the-page-title-or-style">
    <h2 class="step-title screensteps-heading">Edit the page title or style.</h2>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/005/063/525/original/54b6c094-bb2d-4d77-8607-5042afe4c8cd.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/005/063/525/medium/54b6c094-bb2d-4d77-8607-5042afe4c8cd.png" alt="" height="356" width="855">
      </a>
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_411FE8C1-C2A4-4A10-88FD-8DAD35E4D51E" class="text-block-content">
    <p>Select the Settings button at the top of the page.</p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="choose-the-css-file-to-upload">
    <h2 class="step-title screensteps-heading">Choose the CSS file to upload.</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/005/062/904/original/2a815bad-67ef-4552-8069-08c561f56824.png" alt="" height="481" width="793">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_7D431CB8-29FE-4FA3-B663-530370F7B9C5" class="text-block-content">
    <p>In the <em>Settings</em> window:</p>
<ol>
<li>Under <em>Custom CSS File</em>, use the <strong>Choose File</strong> button to select and upload a CSS file from your computer.</li>
<li>Select <strong>Save</strong>.</li>
</ol>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="view-changes">
    <h2 class="step-title screensteps-heading">View changes.</h2>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/005/063/527/original/0a346ab0-f433-421f-af6e-fe9368ccbba2.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/005/063/527/medium/0a346ab0-f433-421f-af6e-fe9368ccbba2.png" alt="" height="492" width="855">
      </a>
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_FEDE25B4-9008-420E-92D5-801F56910BC2" class="text-block-content">
    <p>You will be returned to your lesson page with the new formatting in place.</p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="apply-additional-styling">
    <h2 class="step-title screensteps-heading">Apply additional styling.</h2>
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_9BB8D5E1-B5BB-460D-A11C-78011DA0F5B8" class="text-block-content">
    <p>If your file contains custom formatting to apply to particular elements on the page, you can use the <em>Custom CSS class</em> option on each of those items.  For example, to change the style of buttons.</p>
  </div>
</div>
 
        <div class="step screensteps-section screensteps-depth-2">
    <h3 class="step-title screensteps-heading">Edit the item.</h3>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/005/063/529/original/69f8cfa4-7735-4a76-821f-4b356046ec12.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/005/063/529/medium/69f8cfa4-7735-4a76-821f-4b356046ec12.png" alt="" height="293" width="855">
      </a>
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_3A82DFB1-BDD8-4B07-BFFD-C5797A338C83" class="text-block-content">
    <p>Select the <strong>Edit </strong>(<strong>pencil and paper</strong>) icon for the item to edit, e.g., a link.</p>
  </div>
</div>
 
  </div>
 
        <div class="step screensteps-section screensteps-depth-2" id="add-a-custom-css-class">
    <h3 class="step-title screensteps-heading">Add a custom CSS class.</h3>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/005/062/965/original/d87aa91a-eff4-46c2-b4f9-cf9e175e5d90.png" alt="" height="822" width="778">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_68143CEB-5655-4CF7-8F57-33A32EEB4E64" class="text-block-content">
    <ol>
<li>Choose the option to <strong>Show as button rather than link</strong>.</li>
<li>In the <em>Custom CSS class</em> box, enter the style needed to modify the item.  In this example, we are entering "portletBodyBlue" which is one of the button styles in the style sheet attached above.</li>
<li>Select <strong>Update Item</strong>.</li>
</ol>
  </div>
</div>
 
  </div>
 
        <div class="step screensteps-section screensteps-depth-2" id="view-the-edited-item">
    <h3 class="step-title screensteps-heading">View the edited item.</h3>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/005/063/531/original/c8529643-585f-4d7a-a9e6-cf44a225220f.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/005/063/531/medium/c8529643-585f-4d7a-a9e6-cf44a225220f.png" alt="" height="337" width="855">
      </a>
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_745DE45B-A2C8-4C55-92A6-0F732C0E1A45" class="text-block-content">
    <p>You will be returned to your lesson page with the item formatted in the appropriate style.</p>
  </div>
</div>
 
  </div>
 
  </div>


</div>
</div></div>
</body>
</html>
